<template>
  <div class="type app-main">
    <div class="main">
      <div class="nav">
        <p v-for="(item,index) in type" @click="toggleNav(index,item.id)" :class="[selectedIndex== index?'active' :'' ]"  :key="index" :i="index">{{item.title}}</p>
      </div>
      <section class="section-main">
        <div  v-for="(item,index) in type"  :key="index" :id="'mescroll'+index" class="mescroll" v-show="selectedIndex== index">
          <ul :id="'dataList'+index" class="data-list clearfix">
            <li v-for="v in cards.hot" :key="v.id" class="col-40">
              <div class="pd-img">
                <img :src="v.imgurl" alt="">
              </div>
              <p class="pd-name">{{v.title}}</p>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</template>
 <!-- <router-link :to="{path:'/template'}">查看模版</router-link> -->
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      selectedIndex: 0,
      type: [
        {
          title: '热门',
          id: '1',
          type: 'hot'
        },
        {
          title: '节日',
          id: '2',
          type: 'holiday'
        },
        {
          title: '生日',
          id: '3',
          type: 'birth'
        },
        {
          title: '其他',
          id: '4',
          type: 'ohter'
        }
      ],
      /*eslint-disable */
      cards: {
        hot: [
          {
            id: 1,
            imgurl: require('../../assets/img/show.jpg'),
            title: '六一儿童节'
          },
          {
            id: 2,
            imgurl: require('../../assets/img/show.jpg'),
            title: '六一儿童节'
          },
          {
            id: 3,
            imgurl: require('../../assets/img/show.jpg'),
            title: '六一儿童节'
          },
          {
            id: 4,
            imgurl: require('../../assets/img/show.jpg'),
            title: '六一儿童节'
          }
        ]
      },
      /* eslint-enable */
    }
  },
  methods: {
    toggleNav (index, id) {
      this.selectedIndex = index
      // $(".nav p").click(function(){
      // 	var i=Number($(this).attr("i"));
      // 	if(curNavIndex!=i) {
      // 		//更改列表条件
      // 		$(".nav .active").removeClass("active");
      // 		$(this).addClass("active");
      // 		//隐藏当前列表和回到顶部按钮
      // 		$("#mescroll"+curNavIndex).hide();
      // 		mescrollArr[curNavIndex].hideTopBtn();
      // 		//显示对应的列表
      // 		$("#mescroll"+i).show();
      // 		//取出菜单所对应的mescroll对象,如果未初始化则初始化
      // 		if(mescrollArr[i]==null){
      // 			mescrollArr[i]=initMescroll("mescroll"+i, "dataList"+i);
      // 		}else{
      // 			//检查是否需要显示回到到顶按钮
      // 			var curMescroll=mescrollArr[i];
      // 			var curScrollTop=curMescroll.getScrollTop();
      // 			if(curScrollTop>=curMescroll.optUp.toTop.offset){
      // 				curMescroll.showTopBtn();
      // 			}else{
      // 				curMescroll.hideTopBtn();
      // 			}
      // 		}
      // 		//更新标记
      // 		curNavIndex=i;
      // 	}
      // })
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{height:100%;overflow: hidden;background:url(../../assets/img/type/background.png) no-repeat center center;background-size:cover}
.nav{margin-top:8px;border-bottom:1px solid #ddd}
.nav p{display:inline-block;width:22%;padding:5px 0}
.nav .active{border-bottom:1px solid #FF6990;color:#FF6990}
.section-main{position:relative;top:0.7rem;width:6.7rem;margin:0 auto;min-height:9rem;height:100vh;background-color:#fff;box-sizing:border-box;border-radius:20px;box-shadow:5px -5px 10px #aaa;}
.mescroll{position: absolute;;top:20px;height:auto}
.data-list li{text-align: center;position:relative;list-style: none;float:left;height: 3rem;}
.col-40{width:40%;margin: 5%}
.data-list .pd-img{position: relative;width:100%;height:2.5rem;overflow: hidden;}
.data-list .pd-img img{width: 100%}
.data-list .pd-name{font-size:16px;line-height:2em;height:40px;overflow:hidden;color:#db281c}
</style>
